<template>
  <f7-page class="my-body">
    <qm-currentcy-navbar title="广州住建企业端" bgcolor="#1346bc" color="#ffff" :showback="false">
      <template #nav-left>
        <f7-link icon-f7="menu" :icon-size="21" color="white" @click="showpanel()"></f7-link>
      </template>
      <template #nav-right>
        <f7-link icon-f7="bell" :icon-size="19" href="/ui/notice/index4" color="white"></f7-link>
      </template>
    </qm-currentcy-navbar>
    <van-pull-refresh
      v-model="isRefresh"
      @refresh="refresh"
      style="min-height: 100vh"
    >
      <f7-card no-shadow>
        <f7-card-header>
          <div>{{model.gcmc}}</div>
          <div class="switch">
            切换工程
            <f7-icon f7="chevron_right" size="12px" style="color: #bec7d0; line-height: 10px"></f7-icon>
          </div>
        </f7-card-header>
        <f7-card-content>
          <div class="engineering">
            <div style="margin-bottom: 10px">
              <span>工程编码</span>
              {{model.gcbm}}
            </div>
            <span>项目经理</span>
            {{model.sgdwfzr}}
            <f7-link style="margin-left: 10px">{{model.sgdwfzrdh}}</f7-link>
          </div>
        </f7-card-content>
      </f7-card>
      <qm-block title="我的应用" style="background: #fff">
        <f7-block class="function-list">
          <qm-entry-miniapp
            v-for="(items, index) in query.data"
            :key="index"
            :data="items"
            :parmas="model"
            iconWidth="80"
          ></qm-entry-miniapp>
          <qm-entry-miniapp :data="whole" :parmas="model" iconWidth="80"></qm-entry-miniapp>
        </f7-block>
      </qm-block>
    </van-pull-refresh>
    <qmpanel :showswipe="false" :opened="opened" @closed="opened=$event"></qmpanel>
    <f7-viewbar-instince slot="fixed" :links="links"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
import qmpanel from "../panel/index1.vue";
import controller from "@/libs/framework/controller";
export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      query: "/api/app/mobileServer/getFrequently",
    };
  }

  onInit() {
    this.context.initParams = {
      windowsId: this.$framework.account.getminiapphomepage()?.serverId,
      userId: this.$f7.data.currentUser.userId,
      appCode: this.$f7.id || window.qmplus.runtime.appid,
    };
  }

  mixin() {
    return {
      components: {
        qmpanel,
      },
      data() {
        return {
          model: {
            bdrsjh: null,
            bdzt: "已绑定",
            dwbm: "9131000063126503X1",
            dwlx: "施工单位",
            dwlxsfbm: "sgdw_aqy",
            dwmc: "中国建筑第八工程局有限公司",
            gcbm: "2020-440100-72-03-038981-2001",
            gcmc: "广交会展馆四期展馆扩建项目",
            gdxzb: "23.099375",
            gdyzb: "113.355617",
            jdzbm: "440100-01,440100-02",
            sf: "安全员",
            sfgly: "",
            sfqt: "",
            sgdwfzr: "许本盈",
            sgdwfzrdh: "15822261289",
            username: null,
            zylx: "",
          },
          opened: false,
          // 底部导航栏
          links: [
            {
              text: "工作台",
              icon: "tv_fill",
              class: "person",
              href: "/ui/terminal/index2",
              tabLinkActive: false,
            },
            {
              text: "工地绑定",
              icon: "increase_indent",
              class: "person",
              href: "/ui/function-entrance/index",
              tabLinkActive: false,
            },
          ],
          whole: {
            serverUrl: "/ui/function-entrance/index2",
            iconUrl: "static/img/function-entrance/index1/icon-more.png",
            serverName: "全部应用",
          },
        };
      },
      methods: {
        showpanel() {
          this.opened = true;
        },
      },
    };
  }
}
</script>

<style lang="less" scoped>
// 下拉刷新
/deep/ .van-pull-refresh__head {
  color: #fff;
}
/deep/ .van-loading__text {
  color: #fff;
}
.my-body {
  background: linear-gradient(to bottom, #1346bc 7%, #f5f6f8 21%);
  --f7-card-border-radius: 8px;
  --f7-card-margin-horizontal: 10px;
  height: 100%;
  /deep/ .card-footer:before {
    width: 0;
  }
  /deep/ .card-header:after {
    width: 0;
  }
  .switch {
    color: #bec7d0;
    font-size: 12px;
  }
  .engineering {
    background-color: #f8faf9;
    padding: 10px;
    span {
      color: #a5abb8;
      margin-right: 10px;
    }
  }
  .function-list {
    display: grid;
    grid-template-columns: repeat(4, 18%);
    grid-row-gap: calc(36px * var(--ratio));
    justify-content: space-between;
  }
}
</style>
